<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!--v-cloak 存在闪动缺点 差值表达式{{}} 作用将数据填充到html标签中  支持一些简单的运算 -->
        <div v-cloak>{{msg}}</div>
        <div v-text="msg"></div>
        <!-- v-text 填充纯文本 -->
        <div v-html="msg1"></div>
        <!-- v-html填充HTML片段含标签的 有存在安全隐患 本网站内部数据可以使用，第三方网站的数据不推荐用-->
        <div v-pre>{{msg}}</div>
        <!-- v-pre显示原始信息跳过编译过程 不编译 显示{{msg}} -->
    </div>

    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "helloWorld",
                msg1: "<h1>html</h1>",
            },
        });
    </script>
</body>

</html>